//- 左浮动
.fl{float:left;}
//- 右浮动
.fr{float:right;}
//- 清除浮动
.clear{clear:both;}
.clear:after{font-size:0;display:block;visibility:hidden;clear:both;height:0;content:' ';}
//- 显示
.none{display:none;}
//- 隐藏
.block{display:block}
//- 全局背景颜色
.g-bc{background-color:@default-color;}
//- 全局字体颜色
.g-fc{color:@default-color;}
//- body样式
.body-bg{position:relative;}
@media screen and (min-width: @maxwidth) {
    .body-bg {
        background-color: #333;
    }
}

//- 父元素-flex容器
.flex{display:flex}
//- 子元素-平均分栏
.flex1{flex:1}
//- 盒模型垂直布局
.flex-v{display:flex;flex-direction:column}
//- 子元素垂直居中
.flex-align-center{align-items:center}
//- 子元素水平居中
.flex-pack-center{justify-content:center}
//- 子元素两端对齐
.flex-pack-justify{justify-content: space-between;}

//- 单行文本溢出显示省略号
.ellipsis {
    .text-overflow();
}

.selected {
    position: relative;

    &:before {
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -4px;
        .arrow(@width: 8px, @color: #d9d9d9);
    }
}

//- 1px上划线
.topline {
    position: relative;
    &:before {
        .top-line();
    }
}

//- 1px下划线
.underline {
    position: relative;
    &:after {
        .bottom-line();
    }
}

.m-page {
    // position: absolute;
    // top: 0;
    // left: 0;
    // width: 100%;
    // min-height: 100%;
    // height: 100%;

    position: relative;
    height: 100vh;
    display: flex;
    //- 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
    flex-direction: column;

    background-color: @body-bg;
    overflow: hidden;

    .maxwidth();
}

.m-content {
    // padding-top: @navbar-height;
    // height: 100%;
    flex: auto;
    overflow-y: auto;
    overflow-x: hidden;

    //- 流畅滚动
    -webkit-overflow-scrolling: touch;
}

//- 垂直水平居中方案

//- 方法一：inline-block配合text-align加上table-cell配合vertical-align
.t-mid-parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.t-mid-child {
    display: inline-block;
}

//- 方法二：绝对定位+translate
.r-mid-parent {
    position: relative;
}
.r-mid-child {
    position: absolute;
    left: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

//- 方法三：flexbox
.flex-middle {
    display: flex;
    justify-content: center;
    align-items: center;
}